<template>
	<div class="hall">
		<Fun></Fun>
		<span class="h_title">商品  详情  <a class="h_pingjia">评价</a></span>		
		<div class="htotal container">
			<table>
				<tr><td><span class="htotal_all hall_width_num">全部</span></td><!--<td><span class="htotal_all hall_width_num">好评(999+)</span></td>--><td><span class="htotal_all hall_width_num">中评(1)</span></td></tr>
				<tr><td><span class="htotal_all hall_width_num">差评(3)</span></td><td><span class="htotal_all hall_width_num">有图(20)</span></td></tr>
				<tr><td><span class="htotal_all hall_width">不看默认评价</span></td></tr>
			</table>
			<div class="h_haoping">
				<p>好评度</p>
				<p class="h_percent">99%</p>
			</div>
		</div>
		<ul class="huser_pingjia">
			<!--留言部分-->
			<li class="hcomments" >
				<br />
				<span class="h_comments">提交评价</span>		
			</li>
			<!--留言展示部分-->
			<li class="hcomments" v-for="item in items">
				<div class="huser_infro">
					<span class="hphoto_img"><img src="" alt="" /></span><span class="user">{{item.username}}</span><span class="hlevel">{{item.userlevel}}</span><span class="star_level"><a href="javascript:void(0)" class="iconfont icon-shoucang"></a><a href="javascript:void(0)" class="iconfont icon-shoucang"></a><a href="javascript:void(0)" class="iconfont icon-shoucang"></a><a href="javascript:void(0)" class="iconfont icon-shoucang"></a><a href="javascript:void(0)" class="iconfont icon-shoucang"></a></span><span class="time">{{item.time}}</span>
				</div>
				<p class="huser_comment" @click="comments">{{item.content}}</p>
			</li>
			
		</ul>
		
		
	</div>
</template>

<script>
	export default{
		name:"comments",
		data(){
			return{
				username:"",
				level:"",
				content:"",
				time:"",
				items:[{username:"zh9987688",userlevel:"G5",content:"还行吧",time:"2018-08-02"},{username:"zh6543257",userlevel:"G4",content:"口味不错,非常好喝,口味不错,非常好喝口味不错,非常好喝口味不错,非常好喝口味不错,非常好喝",time:"2017-06-09"},{username:"zh546823165",userlevel:"G5",content:"再来一瓶",time:"2016-09-07"}]
			}
			
		},
		methods:{
			comments:function(){
				
			}
		}
	}
</script>

<style scoped>
	.htotal{width:96%;padding: 1rem 0;margin: 15% auto 0;}
	.container{display: flex; align-items: flex-start;}
	.htotal_all{display:inline-block;height: 2.5rem;background: rgba(255,20,147,1);border-radius:2.5rem ; text-align: center;line-height: 2.5rem;font-size: 1rem;color: white;margin-right: 0.5rem;}
	.h_pingjia{color: deeppink;}
	.h_title{font-size: 2rem;margin-left: 25%;position: absolute;top: 1.5%;height: 4rem;line-height: 4rem;}
	.hall_width_num{width: 5rem;}
	.hall_width{width: 7rem;}
	.h_haoping{display: inline-block;position: absolute; right: 5%;}
	.h_percent{font-size: 2.0rem; color: deeppink;font-weight: 600;}
	.hcomments{position: relative; border-bottom: 0.5rem solid #f3f3f3;}
	/*评价内容*/
	.huser_pingjia{width: 96%;margin: 0 auto;}
	.huser_infro{line-height: 4rem;}
	.hphoto_img{width: 4rem;height:4rem;border-radius:50%;background: rgba(255,20,147,0.2);display: inline-block;}
	.user{width: 10%;padding-left:1rem;}
	.hlevel{width: 2rem;height:2rem;display: inline-block; border-radius: 50%;background:rgba(255,20,147,1);color: white;text-align: center;line-height: 2rem;margin-left:1rem;}
	.star_level{margin-left: 1rem;}
	.star_level a{text-decoration: none;color: deeppink;}
	.time{color: grey;position: absolute;right: 1%;}
	.huser_comment{width:100%;margin-top: 0.5rem;resize: none;outline: none;padding-bottom: 0.5rem;}
	.h_comments{width: 100%;display: inline-block; height: 3rem; line-height: 3rem; background: #D2D2D2;text-align: center;}
</style>